<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户名：" prop="userName">
        <el-input v-model="form.userName" type="String" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="蛋类型" prop="eggType">
        <el-select
          :collapse-tags="true"
          v-model="form.eggType" width="100%" multiple placeholder="请选择状态">
          <el-option
            v-if="item.value !== -1"
            v-for="item in consts.GOLD_EGGS_TYPE"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
        <el-button @click="selfResetForm('refForm')">重置</el-button>
        <el-button @click="exportHandle" type="primary" icon="el-icon-download" v-if="roleCheck('export-gold')">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData.pageInfo.list"
      v-loading="loading"
      show-summary
      :summary-method="getLocalSummaries"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column label="活动日期" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.activityDate | toDate}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column label="当日获得总能量点" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.points}}</div>
        </template>
      </el-table-column>
      <el-table-column label="砸蛋时间" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="蛋类型" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.eggType | toConverter('GOLD_EGGS_TYPE')}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="costPoints" label="消耗能量点" align="center"></el-table-column>
      <el-table-column label="获得奖励" width="180" align="center" prop="amount">
        <template slot-scope="{row}">
          <div>{{row.amount | currency}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"

                     :layout="gridLayout" :total="tableData.pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {getSpringGoldEggs as listApi,exportSpringGoldEggs} from "@/services/api/activity";
  import {grid} from '@/build'

  export default {
    name: "spring-glod-list",
    mixins: [grid],
    data() {
      const time = [moment().startOf('isoWeek').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      const startTime = time[0],
        endTime = time[1];

      return {
        tableData: {
          pageInfo:{
            list:[]
          }
        },
        localSummariesText:'当前页汇总 / 所有页汇总',
        form: {
          time,
          eggType:[1,2,3]
        },
        filters: {
          size: 20,
          page: 1,
          startTime,
          endTime,
          userName: null,
          eggType:[1,2,3]
        },
        statistic: [
          {
            index: 5,
            prop: "costPoints",
            format: value => {
              return <div> {value} / {this.tableData.totalCostPoints} </div>;
            }
          },
          {
            index: 6,
            prop: "amount",
            format: value => {
              return <div>{_.currency(value) } / {_.currency(this.tableData.totalAmount)}</div>;
            }
          },
        ],
      }
    },
    methods: {
      selfResetForm(formName) {
        this.resetForm(formName);
        this.submitFilterForm();
      },
      submitFilterForm() {
        const {time,userName,eggType} = this.form;
        let startTime = undefined, endTime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        this.filters = {...this.filters, userName, startTime, endTime,eggType:eggType.join(",")}
        this.gridSearch()
      },
      exportHandle() {
        let {startTime,endTime,userName,eggType} = this.filters
        let ajaxData = {startTime,endTime,userName,eggType}
        let filename = '砸金蛋明细报表.csv';
        let header = ['活动日期','用户名','当日获得总能量点','砸蛋时间','蛋类型','消耗能量点','获得奖励']
        let filterField = ['activityDate','userName','points','createDate','eggType','costPoints','amount']
        exportSpringGoldEggs(ajaxData).then(([result, data]) => {
          if (result) {
            let exportData = this.responseFormatter(data.pageInfo.list);
            this.export2Excel(header, filterField, exportData, filename)
          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
      responseFormatter(data) {
        data.map(item => {
          item.activityDate = _.toDate(item.activityDate)
          item.createDate = _.toTime(item.createDate)
          item.amount = _.currency(item.amount)
          item.eggType = _.toConverter(item.eggType, 'GOLD_EGGS_TYPE')
        })

        return data
      },
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'活动查询',true)});
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          let result ;
          if(data&&data.pageInfo){
            result = data
          }else{
            result = this.tableData
          }
          return result;
        }
      });
      this.submitFilterForm();
    }

  }
</script>

<style scoped>
  .gren{
    color: rgb(0, 255,0)
  }
  .oran{
    color: rgb(255, 150,0)
  }
  .reed{
    color:rgb(255, 0,0)
  }
  .greey{
    color: rgb(128, 128,128)
  }
</style>
